<template>
    <div class="app_container">
        <div class="title">
            <el-divider content-position="center">
                <h2 style="font-weight: bold;">个人简历</h2>
            </el-divider>
        </div>
        <div class="main_content">
            <el-form ref="form" :model="form" :rules="rules" label-width="180px">
                <div style="margin-top: 20px;">
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="姓名" prop="name">
                                <el-input v-model="form.name" placeholder="请输入姓名" maxlength="50" readonly />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="籍贯" prop="native_place">
                                <el-input v-model="form.native_place" placeholder="请输入籍贯" maxlength="50" readonly />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="部门" prop="department">
                                <el-input v-model="form.department" placeholder="请输入部门" maxlength="50" readonly />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="职务" prop="position">
                                <el-input v-model="form.position" placeholder="请输入职务" maxlength="50" readonly />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="出生年月" prop="birth_time">
                                <el-date-picker v-model="form.birth_time" type="month" placeholder="请输入出生年月"
                                    style="width: 100%;" readonly>
                                </el-date-picker>

                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="进委机关时间" prop="committee_time">
                                <el-date-picker v-model="form.committee_time" type="month" placeholder="请输入进委机关时间"
                                    style="width: 100%;" readonly>
                                </el-date-picker>

                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="全日制学历" prop="full_time_degree">
                                <el-input v-model="form.full_time_degree" placeholder="请输入学历" maxlength="50" readonly />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="全日制毕业院校及专业" prop="full_time_graduation">
                                <el-input v-model="form.full_time_graduation" placeholder="请输入毕业院校及专业" maxlength="50"
                                    readonly />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="任现级时间" prop="now_level_time">
                                <el-date-picker v-model="form.now_level_time" type="month" placeholder="请输入任现级时间"
                                    style="width: 100%;" readonly>
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="任正(副)处职时间" prop="now_office_time">
                                <el-date-picker v-model="form.now_office_time" type="month" placeholder="请输入任正（副）处职时间"
                                    style="width: 100%;" readonly>
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="任现职时间" prop="now_post_time">
                                <el-date-picker v-model="form.now_post_time" type="month" placeholder="请输入任现职时间"
                                    style="width: 100%;" readonly>
                                </el-date-picker>

                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="在职教育学历" prop="on_job_degree">
                                <el-input v-model="form.on_job_degree" placeholder="请输入在职教育学历" maxlength="50"
                                    readonly />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="在职教育毕业院校及专业" prop="on_job_graduation">
                                <el-input v-model="form.on_job_graduation" placeholder="请输入毕业院校及专业" maxlength="50"
                                    readonly />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="入党(团)时间" prop="party_time">
                                <el-date-picker v-model="form.party_time" type="month" placeholder="请输入入党（团）时间" readonly
                                    style="width: 100%;">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="工作时间" prop="work_time">
                                <el-date-picker v-model="form.work_time" type="month" placeholder="请输入工作时间" readonly
                                    style="width: 100%;">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>



                    <el-divider content-position="center">
                        <h2 style="font-weight: bold;">正面清单列表</h2>
                    </el-divider>

                    <div style="width: 100%;text-align: center;color: gray;line-height: 100px;"
                        v-if="roleGroup == '普通角色'">
                        暂无权限
                    </div>
                    <div v-else>
                        <el-table :data="frontlist" height="300" style="margin-top: 80px;">
                            <el-table-column label="序号" type="index" width="50"></el-table-column>
                            <el-table-column label="清单列表" align="left" prop="work_list" />
                        </el-table>
                    </div>
                    <el-divider content-position="center">
                        <h2 style="font-weight: bold;">负面清单列表</h2>
                    </el-divider>
                    <div style="width: 100%;text-align: center;color: gray;line-height: 100px;"
                        v-if="roleGroup == '普通角色'">
                        暂无权限
                    </div>
                    <div v-else>
                        <el-table :data="negativelist" height="300" style="margin-top: 80px;">
                            <el-table-column label="序号" type="index" width="50"></el-table-column>
                            <el-table-column label="清单列表" align="left" prop="work_list" />
                        </el-table>
                    </div>




                    <!-- <el-form-item label="图片" prop="location">
              <div style="display: flex;flex-direction: row;">
                <el-upload ref="upload" action="" :on-exceed="handleExceed" list-type="picture-card"
                  :limit="limitUpload" accept=".jpeg,.icon,.png,.gif,.jpg" :on-preview="handlePreview"
                  :on-remove="handleRemove" :file-list="fileListImg" :on-change="onUploadChangeImg" :auto-upload="false"
                  style="margin-left: 20px;">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible" append-to-body>
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
              </div>
            </el-form-item> -->

                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import { getpersonalinformation, delUsers, delUser, addUser, updateUser, gettypelist, uploadimg } from "@/api/jiguanorder";
import { getUserProfile } from "@/api/system/user";
export default {
    name: "Post",
    dicts: ['sys_normal_disable'],
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 岗位表格数据
            postList: [],
            //正面清单
            frontlist: [],
            //负面清单
            negativelist: [],
            roleGroup: {},
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            user: {},
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                postCode: undefined,
                postName: undefined,
                status: undefined,
                civilServantsId: '',
                prosCons: '0',
                id: ''
            },
            fileListImg: [],
            limitUpload: 1,
            isdisable: true,
            options: [],
            dialogVisible: false,
            dialogImageUrl: '',
            active: 1,
            pic: '',
            pictureurl: [],
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                // type_id: [
                //     { required: true, message: "清单类型不能为空", trigger: "blur" }
                // ],
            }
        };
    },
    created() {
        this.getList();
        this.getUser();
        //   this.gettypeList();
    },
    methods: {
        /** 查询清单列表 */
        getList() {
            this.queryParams.id = this.$route.query.id
            getpersonalinformation(this.queryParams).then(response => {
                this.form = response.data.civilServants;

                response.data.listSummary.forEach(item => {
                    if (item.pros_cons == 0) {
                        this.frontlist.push({ work_list: item.work_list })
                    }
                    if (item.pros_cons == 2) {
                        this.negativelist.push({ work_list: item.work_list })
                    }
                });
            });
        },

        getUser() {
            getUserProfile().then(response => {
                this.user = response.data;
                this.roleGroup = response.roleGroup;
                console.log(this.roleGroup)
            });
        },

        //超出最大上传文件数量时的处理方法
        handleExceed() {
            this.$message({
                type: "warning",
                message: "超出最大上传文件数量的限制！"
            });
            return;
        },

        handlePreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleRemove(file, fileList) {
            this.form.pic = ''
            this.fileListImg = []
            // console.log(file, fileList);
        },


        //上传图片
        onUploadChangeImg(file) {
            console.log(file, 'file123')
            const _self = this;
            const isZIP = file.raw.type === 'image/jpeg' || file.raw.type === 'image/x-icon' || file.raw.type === 'image/png' || file.raw.type === 'image/gif';
            const isLt1M = file.size / 1024 / 1024 < 20;
            if (!isLt1M) {
                this.$message.error('文件上传大小不能超过20M');
                return;
            }
            if (!isZIP) {
                this.$message.error('文件需求格式错误！');
                return;
            }
            var reader = new FileReader();
            if (isZIP) {
                reader.readAsDataURL(file.raw);
                reader.onload = function (e) {
                    _self.pic = e.target.result;
                    const formData = new FormData();
                    formData.append('file', file.raw);
                    // console.log(formData,'formData')
                    uploadimg(formData).then(res => {
                        _self.form.location = res.url
                        // console.log(_self.form.location)
                    })
                }
            } else {
                alert('请上传图片格式的文件！');
            }
        },


        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                civilServantsId: this.$route.query.zhengid,
                id: undefined,
                // postCode: undefined,
                // postName: undefined,
                del_flag: '0',
                pros_cons: "0",
                type: undefined,
                work_list: undefined,
                location: ''
            };
            this.active = 1
            this.isdisable = true
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length != 1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "添加清单";
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            this.open = true;
            this.isdisable = false;
            this.title = "修改清单";
            this.form.work_list = row.work_list
            this.form.id = row.id
            this.form.type_id = row.type
            if (row.location) {
                this.form.location = row.location
                this.fileListImg = [{ name: row.location, url: row.location }]
            }
            else {
                this.fileListImg = []
            }
            this.pictureurl.push(row.location)

            // this.queryParams.civilServantsId = this.$route.query.zhengid
            // this.queryParams.prosCons = '0'
            // getzhenglist(this.queryParams).then(response => {
            //   this.form = response.data;
            //   this.open = true;
            //   this.title = "修改清单";
            // });
        },
        /** 提交按钮 */
        submitForm: function () {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != undefined) {
                        updateUser(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        this.form.civil_servants_id = this.$route.query.zhengid
                        this.form.prosCons = '0'
                        this.form.del_flag = '0'
                        addUser(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            console.log(row.id)
            const postIds = row.id || this.ids;
            this.$modal.confirm('是否确认删除机关公务员编号为"' + postIds + '"的数据项？').then(function () {
                return delUser(postIds);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },



        /** 批量删除按钮操作 */
        handleDeleteall(row) {
            console.log(row.id)
            const postIds = row.id || this.ids;
            this.$modal.confirm('是否确认删除机关公务员编号为"' + postIds + '"的数据项？').then(function () {
                return delUsers(postIds);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },




        /** 导出按钮操作 */
        handleExport() {
            this.download('system/post/export', {
                ...this.queryParams
            }, `post_${new Date().getTime()}.xlsx`)
        }
    }
};
</script>
<style>
.el-upload--picture-card {
    width: 100px;
    height: 100px;
    line-height: 105px;
}

.el-upload-list--picture-card .el-upload-list__item {
    width: 100px;
    height: 100px;
}
</style>
<style scoped>
.app_container {
    width: 100%;
}

.title {
    width: 100%;
    text-align: center;
    font-size: 22px;
    letter-spacing: 1px;
    font-weight: bold;
}

.main_content {
    width: 85%;
    margin: 40px auto;
}
</style>